<template>
    <div>
        <div
            style="position: relative;  width: 100%; height: 70%; display: flex; justify-content: center;flex-wrap: wrap; overflow-x: hidden; align-items: center;">
            <div style="width: 100%; height:30rem; overflow: hidden;" class="imageContainer">
                <img src="@/assets/img/2.png" alt="" style="width: 100%; height: 100%; object-fit:cover;">
            </div>
            <div style="margin-top: 0; position: absolute; text-shadow: 2px 2px 10px #000; z-index: 1;">
                <h1
                    style="font-size: 2rem; color: #fff; font-weight: 500; padding: 0;border: 0;margin: 0;width: 100%; font-family:Ubuntu-Bt ;">
                    文章归档</h1>
            </div>
        </div>
        <div class="main-inner site-content archives">
            <article>
                <div class="archives-inner">
                    <div v-for="(time,index) in uniqueTimes" :key="index">
                        <div class="archive-item">
                            <div class="archive-title">
                                <span class="archive-time flex-child-center">
                                    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em"
                                        height="1em" viewBox="0 0 256 256" data-icon="ph:read-cv-logo-bold"
                                        class="iconify iconify--ph">
                                        <path fill="currentColor"
                                            d="m211.48 35.32l-130.25-23a20 20 0 0 0-23.18 16.22l-29.75 169a20 20 0 0 0 16.22 23.16l130.25 23a20 20 0 0 0 3.52.31A20 20 0 0 0 198 227.46l29.75-169a20 20 0 0 0-16.27-23.14M175 219.36L52.63 197.75L81 36.64l122.37 21.61ZM91.9 67a12 12 0 0 1 13.9-9.73L173 69.14A12 12 0 0 1 171 93a12.6 12.6 0 0 1-2.1-.18L101.63 80.9A12 12 0 0 1 91.9 67M85 106.39a12 12 0 0 1 13.91-9.73l67.22 11.88a12 12 0 0 1-2.13 23.81a12.5 12.5 0 0 1-2.1-.18l-67.21-11.88a12 12 0 0 1-9.69-13.9m-7 39.39a12 12 0 0 1 13.9-9.73l33.64 5.95a12 12 0 0 1-2.07 23.82a11.6 11.6 0 0 1-2.1-.19l-33.61-5.93A12 12 0 0 1 78 145.78">
                                        </path>
                                    </svg>
                                </span>
                                <h3 @click="extendTime(time)">{{ time }}</h3>
                            </div>
                            <div v-for="novel in novels" :key="novel.id">
                                <div v-if="novel.time.slice(0, 7) == time">
                                    <div class="archive-posts" :class="'date'+time">
                                        <div class="archive-post-item">
                                            <span class="archive-post-circle"></span>
                                            <div class="arrow-left-ar"></div>
                                            <div class="brick">
                                                <a data-pjax=""
                                                    @click="$router.push({ path: '/novel', query: { novel: JSON.stringify(novel) } })"
                                                    style="cursor: pointer;" aria-label="get the next article"
                                                    data-pjax-state="">
                                                    <span class="time flex-child-center">
                                                        <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true"
                                                            role="img" width="1em" height="1em" viewBox="0 0 24 24"
                                                            data-icon="ic:round-access-time"
                                                            class="iconify iconify--large iconify--ic">
                                                            <path fill="currentColor"
                                                                d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2M12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8s8 3.58 8 8s-3.58 8-8 8m-.22-13h-.06c-.4 0-.72.32-.72.72v4.72c0 .35.18.68.49.86l4.15 2.49c.34.2.78.1.98-.24a.71.71 0 0 0-.25-.99l-3.87-2.3V7.72c0-.4-.32-.72-.72-.72">
                                                            </path>
                                                        </svg>
                                                        {{ novel.time.slice(0, 10) }}
                                                    </span>
                                                    {{ novel.title }}
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </article>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return{
            times:[],
            novels:[],
            uniqueTimes:[],
        }
    },
    created(){
        this.load()
    },
    updated(){
    /*     document.querySelectorAll('.archive-posts').forEach((el,index)=>{
            if(index<1){
                el.style.maxHeight='88px'
            }
        }) */
    },
    mounted(){
        
    },
    methods:{
        load(){
            this.$request.get('/novel/list').then(res => {
            this.novels = res.data
            this.times = this.novels.map(v => new Date(v.time).toISOString().slice(0, 7));
            this.uniqueTimes = [...new Set(this.times)];
        })
        },
        extendTime(time){
            document.querySelectorAll('.date' + time).forEach(time => {
                if (time.style.maxHeight != '0px') {
                    time.style.maxHeight='0px'
                }
                else{
                    time.style.maxHeight='88px'
                }
                
            })
        }
    }
}
</script>

<style scoped>
.main-inner {
    position: relative;
    z-index: 1;
}
.site-content {
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
    background-color: #fffc;
    padding: 0 10px;
}
.archives-inner {
    margin-top: 50px;
    margin-bottom: 100px;
    position: relative;
}
.archives-inner .archive-item {
    /* margin-top: 35px; */
    position: relative;
    z-index: 1;
}
.archives-inner .archive-item .archive-title {
    display: flex;
    align-items: center;
}
.flex-child-center {
    display: inline-flex;
    align-items: center;
    gap: .375em;
}
.archives-inner .archive-item .archive-title .archive-time svg {
    padding: 10px;
    border-radius: 100px;
    background: orange;
    color: #fff;
}

.archives-inner .archive-item .archive-title h3 {
    letter-spacing: 2px;
    font-style: italic;
    font-size: 20px;
    font-weight: 400;
    color: orange;
    margin-left: 10px;
}
.archives-inner .archive-item .archive-posts .archive-post-item {
    position: relative;
}
.archive-posts {
    max-height: 88px;
    overflow: hidden;
    transition: max-height .5s ease-in-out;
}

.archive-post-circle {
    height: 11px;
    width: 11px;
    background: orange;
    display: inline-block;
    position: absolute;
    margin-top: 22px;
    border-radius: 100px;
    left: 12px;
}

.arrow-left-ar {
    width: 0;
    height: 0;
    display: block;
    float: left;
    margin-top: 10px;
    border-left: 20px solid transparent;
    border-bottom: 20px solid #f5f5f5;
    margin-left: 26px;
}
.brick {
    margin-left: 46px;
}

.brick a {
    color: #7d7d7d;
    padding: 20px;
    background: #f5f5f5;
    margin: 10px 0;
    display: block;
    letter-spacing: 0px;
    text-decoration: none;
}

.time {
    float: right;
    color: #ccc;
}
.archive-title h3:hover {
    color: #ddd !important;
    cursor: pointer;
}
</style>